<template>
  <view class="project-container">
    <customtop2 top_title="项目社"></customtop2>

    <view class="classify">
      <template v-for="(classifyItem, index) in classifyList">
        <view class="item" @click="gotoListClick(classifyItem)">
          <view class="img">
            <image :src="classifyItem.img" mode="scaleToFill" />
          </view>
          <view class="name">{{ classifyItem.name }}</view>
        </view>
      </template>
    </view>
    <view class="content">
      <view class="title">
        <view class="left"> 帖子大厅 </view>
        <view class="navbar">
          <template v-for="(item, index) in navbarList">
            <view
              class="item-text"
              @click="activeClick(index, item)"
              :class="{ active: currentIndex === index }"
            >
              {{ item.name }}</view
            >
          </template>
        </view>
      </view>
      <template v-for="item in list">
        <global-item :item="item" @getDetail="getDetail"></global-item>
      </template>
    </view>
  </view>
</template>

<script>
import globalItem from "@/components/item/index";
import customtop2 from "@/components/customtop2.vue";
import { request } from "@/utils/http.js";

export default {
  data() {
    return {
      navbarList: [
        {
          name: "推荐",
          px: 1,
        },

        {
          name: "最新发布",
          px: 2,
        },
      ],
      currentIndex: 0,
      classifyList: [
        {
          name: "分销代理",
          img: "../../static/images/fenxiao.png",
          url: "/pages/postList/index?type=1",
          id: "",
        },
        {
          name: "招商加盟",
          img: "../../static/images/zhaoshang.png",
          url: "/pages/postList/index?type=2",
          id: "",
        },
        {
          name: "异业合作",
          img: "../../static/images/hezuo.png",
          url: "/pages/postList/index?type=3",
          id: "",
        },
        {
          name: "找单求助",
          img: "../../static/images/bangzhu.png",
          url: "/pages/postList/index?type=4",
          id: "",
        },
        {
          name: "创业合伙",
          img: "../../static/images/huoban.png",
          url: "/pages/postList/index?type=5",
          id: "",
        },
        {
          name: "其他",
          img: "../../static/images/qita.png",
          url: "/pages/postList/index?type=6",
          id: "",
        },
      ],
      params: {
        page_size: 15,
        page: 1,
        px: 1,
      },
      list: [],
    };
  },
  components: { globalItem, customtop2 },
  onLoad(options) {
    this.getAbbsPaginate();
    this.getCategoryList();
  },
  onShow() {
    this.getAbbsPaginate();
  },
  onReachBottom() {
    this.params.page++;
    this.getAbbsPaginate(true);
    console.log("触底");
  },
  methods: {
    getDetail(item) {
      const { id } = item;
      this.$u.route("/pages/postList/detail", {
        id,
      });
    },
    activeClick(i, item) {
      this.currentIndex = i;
      const { px } = item;
      this.params.px = px;
      this.getAbbsPaginate();
    },
    gotoListClick(item) {
      const { url, id } = item;
      this.$u.route(url, {
        id,
      });
    },
    // 列表
    getAbbsPaginate(isReachBottom) {
      uni.showLoading({
        title: "",
        mask: true,
      });
      let params = this.params;
      request.post("/xiangmushe/getAllList", params).then((res) => {
        if (
          res.data.data.length > 0 &&
          this.params.page <= res.data.last_page
        ) {
          if (isReachBottom) {
            this.list = this.list.concat(res.data.data);
          } else {
            this.list = res.data.data;
          }
        } else if (this.params.page >= 1) {
          this.params.page--;
        }
      });
      uni.hideLoading();
    },
    // 分类
    getCategoryList() {
      request.post("/xiangmushe/getCategoryList").then(({ data }) => {
        this.classifyList.forEach((item) => {
          data.data.forEach((i) => {
            if (i.name === item.name) {
              item.id = i.id;
            }
          });
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.project-container {
  // height: 100%;
  background-color: #f1f1f1 !important;
  .classify {
    background-color: #fff;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    .item {
      width: 220rpx;
      height: 180rpx;
      // border: 1rpx solid red;
      margin: 20rpx 0;
      font-size: 27rpx;
      color: #3b3b3b;
      .name {
        text-align: center;
      }
      .img {
        display: flex;
        justify-content: center;
        image {
          width: 100rpx;
          height: 100rpx;
        }
      }
    }
  }
  .content {
    .title {
      display: flex;
      justify-content: space-between;
      padding: 15rpx 15rpx;
      box-sizing: border-box;
      .left {
        font-size: 28rpx;
      }
      .navbar {
        display: flex;
        font-size: 26rpx;
        color: #999;
        .item-text {
          margin-right: 15rpx;
        }
      }
    }
    margin-top: 10rpx;
    background-color: #fff;
  }
}
.active {
  color: #549cd6;
  position: relative;
  &::after {
    content: " ";
    position: absolute;

    width: 30rpx;
    height: 2rpx;
    background-color: #549cd6;
    bottom: 0;
    // top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
</style>
